<template>
  <div class="text-component">
    <p :style="componentStyle">{{ text }}</p>
  </div>
</template>

<script>
export default {
  name: 'TextComponent',
  props: {
    text: {
      type: String,
      default: '这是一个文本段落'
    },
    color: {
      type: String,
      default: '#333333'
    },
    fontSize: {
      type: Number,
      default: 14
    }
  },
  computed: {
    componentStyle() {
      return {
        color: this.color,
        fontSize: `${this.fontSize}px`
      };
    }
  }
}
</script>

<style scoped>
p {
  margin: 0;
  padding: 10px;
}
</style>